﻿{extend name="public:base" /}

{block name="css"}
<link href="__STATIC__/laydate/theme/default/laydate.css">{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="ibox-content">
                        <div class="row search-form">
                            <div class="col-sm-2 m-b-sm">
                                <div class="input-group">
                                    <input placeholder="选择开始日期搜索" type="text" class="form-control form-control-lg screen-date" name="start_time" value="{:input('start_time')}" readonly="" lay-key="1">
                                </div>
                            </div>
                            <div class="col-sm-2 m-b-sm">
                                <div class="input-group">
                                    <input placeholder="选择结束日期搜索" type="text" class="form-control form-control-lg screen-date" name="end_time" value="{:input('end_time')}" readonly="" lay-key="1">
                                </div>
                            </div>
                            <div class="col-sm-6 m-b-sm">
                                <div class="input-group">
                                    <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                                </div>
                            </div>
                            <div class="col-sm-2 m-b-sm">
                                <select class="form-control form-control-lg" onchange="changeShow(this)">
                                    <option value="2">显示折线图</option>
                                    <option value="1">显示列表</option>
                                </select>
                            </div>
                        </div>


                        <div class="table-responsive" id="list">
                            <table class="table table-striped">
                                <tr>
                                    <th>ID</th>
                                    <th>昵称</th>
                                    <th>头像</th>
                                    <th>手机号</th>
                                    <th>老师</th>
                                    <th>注册时间</th>
                                </tr>
                                {volist name="list" id="vo"}
                                <tr>
                                    <td>{$vo.id}</td>
                                    <td>{$vo.username}</td>
                                    <td>
                                        <img src="{$vo.avatar|doAvatar}" style="width: 60px;height: 60px; object-fit: cover"/>
                                    </td>
                                    <td>{$vo.mobile}</td>
                                    <td>{$vo.teacher_username}</td>
                                    <td>{$vo.create_time|timeFormat}</td>
                                </tr>
                                {/volist}
                            </table>
                            {if !empty($list)}{$list->render()}{/if}
                        </div>

                        <div class="hr-line-dashed"></div>

                        <div id="box" style="width: 100%; height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script src="__PLUG__/echarts/echarts.min.js"></script>
<script src="__STATIC__/laydate/laydate.js"></script>
<script>
    var show_type = 2;
    ctrShow();

    function ctrShow() {
        if (show_type == 1) {
            $('#list').show();
            $('#box').hide();
        } else {
            $('#list').hide();
            $('#box').show();
        }
    }

    function changeShow(that) {
        show_type = $(that).val();
        ctrShow();
    }


    laydate.render({
        elem: '.screen-date' //指定元素
    });

    var myChart = echarts.init(document.getElementById("box"));
    var time_list = `{$time_list}` ? JSON.parse(`{$time_list}`) : [];
    var student_list = `{$student_list}` ? JSON.parse(`{$student_list}`) : []

    var option = {
        xAxis: {
            name: '注册日期',
            type: 'category',
            boundaryGap: false,
            // 取消坐标轴刻度线
            /*axisTick: {
                show: false
            },*/
            data: time_list
        },
        yAxis: {
            name: '注册数量',
            type: 'value'
        },
        series: [
            {
                data: student_list,
                type: 'line',
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ],
        tooltip: {
            type: 'cross',
            trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
            backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
            borderRadius: 8,           // 提示边框圆角，单位px，默认为4
            padding: 10,                // 提示内边距，单位px，默认各方向内边距为5，
            textStyle: {
                color: '#fff'
            },
            valueFormatter: (value) => '会员注册数量' + value + '个'
        },
    };

    myChart.setOption(option);
</script>


{/block}

